<template>
	<view class="app">
		<view class="Album">
			<AppNavbar :bgColor="'#fff'" title="Photo album" titlecolor="#000" leftIconColor="#000" fontWeight="600"
				fixed>
			</AppNavbar>
			<myAlbum :list="state.list" v-if="state.list.length"></myAlbum>

		</view>
	</view>
</template>

<script setup>
	import {

		getAlbumDetailApi
	} from '@/api/album.js'
	const state = reactive({
		list: []
	})
	onMounted(() => {

		getDetail()
	})
	const getDetail = async () => {
		let attr = {
			photo: {
				name: 'photograoh',
				photoType: 1
			},
			video: {
				name: 'video',
				photoType: 2
			},
			recycleBin: {
				name: 'Recycle bin',
				photoType: 3
			}

		}
		const {
			code,
			data
		} = await getAlbumDetailApi()
		if (code === 200) {
			for (let key in attr) {
				for (let key2 in data) {
					if (key2.indexOf(key) !== -1) {
						attr[key][key2.substring(key.length)] = data[key2]
					}
				}
			}
			console.log(attr);
			state.list = [
				[attr.photo, attr.video],
				[attr.recycleBin]
			]
		}

	}
</script>

<style lang="scss">
	.app {
		.Album {
			height: 100vh;


		}
	}
</style>